<template>
  <div class="steps">
    <div class="steps-item" v-for="(item, index) in steps" :key="index">
      <div class="icon" v-if="index < stepActive" />
      <div class="doing" v-else-if="index === stepActive">{{ index + 1 }}</div>
      <div class="future" v-else>{{ index + 1 }}</div>
      <div class="text">{{ item }}</div>
      <div
        :class="['line', { blue: index < stepActive }]"
        v-if="index !== steps.length - 1"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stepActive: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      steps: [
        '申请须知',
        '基本信息',
        '填写申请表',
        '材料清单和附件',
        '确认提交',
        '完成申请',
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.steps {
  margin: auto;
  display: flex;
  .steps-item {
    display: flex;
    align-items: center;
    .icon {
      width: 24px;
      height: 24px;
      background: url('~@/assets/img/components/steps_tick.png') 100% 100%
        no-repeat;
    }
    .doing {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      background: #3c8cf1;
      color: #fff;
      text-align: center;
    }
    .future {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      background: #dddddd;
      color: #333333;
      text-align: center;
    }
    .text {
      margin: 0px 12px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .line {
      margin-right: 12px;
      width: 120px;
      height: 1px;
      background-color: #dddddd;
    }
    .blue {
      background-color: #005be0;
    }
  }
}
</style>
